<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Chat-demo-primary">默认样式</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Chat聊天室</h1>
        <section class="markdown">
            <p></p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Chat-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<div class="box box-warning direct-chat direct-chat-warning">
                <div class="box-header with-border">
                  <h3 class="box-title">Direct Chat</h3>

                  <div class="box-tools pull-right">
                    <span data-toggle="tooltip" title="" class="badge bg-yellow" data-original-title="3 New Messages">3</span>
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-toggle="tooltip" title="" data-widget="chat-pane-toggle" data-original-title="Contacts">
                      <i class="fa fa-comments"></i></button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                    </button>
                  </div>
                </div>
                <!-- /.box-header -->
<div class="box-body">
  <!-- Conversations are loaded here -->
  <div class="direct-chat-messages">
    <!-- Message. Default to the left -->
    <div class="direct-chat-msg">
      <div class="direct-chat-info clearfix">
        <span class="direct-chat-name pull-left">Alexander Pierce</span>
        <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
      </div>
      <!-- /.direct-chat-info -->
      <img class="direct-chat-img" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="message user image">
      <!-- /.direct-chat-img -->
      <div class="direct-chat-text">
        Is this template really for free? That's unbelievable!
      </div>
      <!-- /.direct-chat-text -->
    </div>
    <!-- /.direct-chat-msg -->

    <!-- Message to the right -->
    <div class="direct-chat-msg right">
      <div class="direct-chat-info clearfix">
        <span class="direct-chat-name pull-right">Sarah Bullock</span>
        <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
      </div>
      <!-- /.direct-chat-info -->
      <img class="direct-chat-img" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="message user image">
      <!-- /.direct-chat-img -->
      <div class="direct-chat-text">
        You better believe it!
      </div>
      <!-- /.direct-chat-text -->
    </div>
    <!-- /.direct-chat-msg -->

    <!-- Message. Default to the left -->
    <div class="direct-chat-msg">
      <div class="direct-chat-info clearfix">
        <span class="direct-chat-name pull-left">Alexander Pierce</span>
        <span class="direct-chat-timestamp pull-right">23 Jan 5:37 pm</span>
      </div>
      <!-- /.direct-chat-info -->
      <img class="direct-chat-img" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="message user image">
      <!-- /.direct-chat-img -->
      <div class="direct-chat-text">
        Working with AdminLTE on a great new app! Wanna join?
      </div>
      <!-- /.direct-chat-text -->
    </div>
    <!-- /.direct-chat-msg -->

    <!-- Message to the right -->
    <div class="direct-chat-msg right">
      <div class="direct-chat-info clearfix">
        <span class="direct-chat-name pull-right">Sarah Bullock</span>
        <span class="direct-chat-timestamp pull-left">23 Jan 6:10 pm</span>
      </div>
      <!-- /.direct-chat-info -->
      <img class="direct-chat-img" src="http://adminlte.la998.com/dist/img/user4-128x128.jpg" alt="message user image">
      <!-- /.direct-chat-img -->
      <div class="direct-chat-text">
        I would love to.
      </div>
      <!-- /.direct-chat-text -->
    </div>
    <!-- /.direct-chat-msg -->

  </div>
  <!--/.direct-chat-messages-->

  <!-- Contacts are loaded here -->
  <div class="direct-chat-contacts">
    <ul class="contacts-list">
      <li>
        <a href="#">
          <img class="contacts-list-img" src="dist/assets/img/user1-128x128.jpg" alt="User Image">

          <div class="contacts-list-info">
                <span class="contacts-list-name">
                  Count Dracula
                  <small class="contacts-list-date pull-right">2/28/2015</small>
                </span>
            <span class="contacts-list-msg">How have you been? I was...</span>
          </div>
          <!-- /.contacts-list-info -->
        </a>
      </li>
      <!-- End Contact Item -->
      <li>
        <a href="#">
          <img class="contacts-list-img" src="dist/assets/img/user7-128x128.jpg" alt="User Image">

          <div class="contacts-list-info">
                <span class="contacts-list-name">
                  Sarah Doe
                  <small class="contacts-list-date pull-right">2/23/2015</small>
                </span>
            <span class="contacts-list-msg">I will be waiting for...</span>
          </div>
          <!-- /.contacts-list-info -->
        </a>
      </li>
      <!-- End Contact Item -->
      <li>
        <a href="#">
          <img class="contacts-list-img" src="dist/assets/img/user3-128x128.jpg" alt="User Image">

          <div class="contacts-list-info">
                <span class="contacts-list-name">
                  Nadia Jolie
                  <small class="contacts-list-date pull-right">2/20/2015</small>
                </span>
            <span class="contacts-list-msg">I'll call you back at...</span>
          </div>
          <!-- /.contacts-list-info -->
        </a>
      </li>
      <!-- End Contact Item -->
      <li>
        <a href="#">
          <img class="contacts-list-img" src="dist/assets/img/user5-128x128.jpg" alt="User Image">

          <div class="contacts-list-info">
                <span class="contacts-list-name">
                  Nora S. Vans
                  <small class="contacts-list-date pull-right">2/10/2015</small>
                </span>
            <span class="contacts-list-msg">Where is your new...</span>
          </div>
          <!-- /.contacts-list-info -->
        </a>
      </li>
      <!-- End Contact Item -->
      <li>
        <a href="#">
          <img class="contacts-list-img" src="dist/assets/img/user6-128x128.jpg" alt="User Image">

          <div class="contacts-list-info">
                <span class="contacts-list-name">
                  John K.
                  <small class="contacts-list-date pull-right">1/27/2015</small>
                </span>
            <span class="contacts-list-msg">Can I take a look at...</span>
          </div>
          <!-- /.contacts-list-info -->
        </a>
      </li>
      <!-- End Contact Item -->
      <li>
        <a href="#">
          <img class="contacts-list-img" src="dist/assets/img/user8-128x128.jpg" alt="User Image">

          <div class="contacts-list-info">
                <span class="contacts-list-name">
                  Kenneth M.
                  <small class="contacts-list-date pull-right">1/4/2015</small>
                </span>
            <span class="contacts-list-msg">Never mind I found...</span>
          </div>
          <!-- /.contacts-list-info -->
        </a>
      </li>
      <!-- End Contact Item -->
    </ul>
    <!-- /.contatcts-list -->
  </div>
  <!-- /.direct-chat-pane -->
</div>
<!-- /.box-body -->
<div class="box-footer">
  <form action="#" method="post">
    <div class="input-group">
      <input type="text" name="message" placeholder="Type Message ..." class="form-control">
      <span class="input-group-btn">
            <button type="button" class="btn btn-warning btn-flat">Send</button>
          </span>
    </div>
  </form>
</div>
<!-- /.box-footer-->
</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Chat-demo-primary">默认样式</a></div>
                    <div>
                         <p></p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;box-body&quot;&gt;
  &lt;!-- Conversations are loaded here --&gt;
  &lt;div class=&quot;direct-chat-messages&quot;&gt;
    &lt;!-- Message. Default to the left --&gt;
    &lt;div class=&quot;direct-chat-msg&quot;&gt;
      &lt;div class=&quot;direct-chat-info clearfix&quot;&gt;
        &lt;span class=&quot;direct-chat-name pull-left&quot;&gt;Alexander Pierce&lt;/span&gt;
        &lt;span class=&quot;direct-chat-timestamp pull-right&quot;&gt;23 Jan 2:00 pm&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-info --&gt;
      &lt;img class=&quot;direct-chat-img&quot; src=&quot;dist/assets/img/user1-128x128.jpg&quot; alt=&quot;message user image&quot;&gt;
      &lt;!-- /.direct-chat-img --&gt;
      &lt;div class=&quot;direct-chat-text&quot;&gt;
        Is this template really for free? That&#x27;s unbelievable!
      &lt;/div&gt;
      &lt;!-- /.direct-chat-text --&gt;
    &lt;/div&gt;
    &lt;!-- /.direct-chat-msg --&gt;

    &lt;!-- Message to the right --&gt;
    &lt;div class=&quot;direct-chat-msg right&quot;&gt;
      &lt;div class=&quot;direct-chat-info clearfix&quot;&gt;
        &lt;span class=&quot;direct-chat-name pull-right&quot;&gt;Sarah Bullock&lt;/span&gt;
        &lt;span class=&quot;direct-chat-timestamp pull-left&quot;&gt;23 Jan 2:05 pm&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-info --&gt;
      &lt;img class=&quot;direct-chat-img&quot; src=&quot;dist/assets/img/user3-128x128.jpg&quot; alt=&quot;message user image&quot;&gt;
      &lt;!-- /.direct-chat-img --&gt;
      &lt;div class=&quot;direct-chat-text&quot;&gt;
        You better believe it!
      &lt;/div&gt;
      &lt;!-- /.direct-chat-text --&gt;
    &lt;/div&gt;
    &lt;!-- /.direct-chat-msg --&gt;

    &lt;!-- Message. Default to the left --&gt;
    &lt;div class=&quot;direct-chat-msg&quot;&gt;
      &lt;div class=&quot;direct-chat-info clearfix&quot;&gt;
        &lt;span class=&quot;direct-chat-name pull-left&quot;&gt;Alexander Pierce&lt;/span&gt;
        &lt;span class=&quot;direct-chat-timestamp pull-right&quot;&gt;23 Jan 5:37 pm&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-info --&gt;
      &lt;img class=&quot;direct-chat-img&quot; src=&quot;dist/assets/img/user1-128x128.jpg&quot; alt=&quot;message user image&quot;&gt;
      &lt;!-- /.direct-chat-img --&gt;
      &lt;div class=&quot;direct-chat-text&quot;&gt;
        Working with AdminLTE on a great new app! Wanna join?
      &lt;/div&gt;
      &lt;!-- /.direct-chat-text --&gt;
    &lt;/div&gt;
    &lt;!-- /.direct-chat-msg --&gt;

    &lt;!-- Message to the right --&gt;
    &lt;div class=&quot;direct-chat-msg right&quot;&gt;
      &lt;div class=&quot;direct-chat-info clearfix&quot;&gt;
        &lt;span class=&quot;direct-chat-name pull-right&quot;&gt;Sarah Bullock&lt;/span&gt;
        &lt;span class=&quot;direct-chat-timestamp pull-left&quot;&gt;23 Jan 6:10 pm&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- /.direct-chat-info --&gt;
      &lt;img class=&quot;direct-chat-img&quot; src=&quot;dist/assets/img/user3-128x128.jpg&quot; alt=&quot;message user image&quot;&gt;
      &lt;!-- /.direct-chat-img --&gt;
      &lt;div class=&quot;direct-chat-text&quot;&gt;
        I would love to.
      &lt;/div&gt;
      &lt;!-- /.direct-chat-text --&gt;
    &lt;/div&gt;
    &lt;!-- /.direct-chat-msg --&gt;

  &lt;/div&gt;
  &lt;!--/.direct-chat-messages--&gt;

  &lt;!-- Contacts are loaded here --&gt;
  &lt;div class=&quot;direct-chat-contacts&quot;&gt;
    &lt;ul class=&quot;contacts-list&quot;&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;
          &lt;img class=&quot;contacts-list-img&quot; src=&quot;dist/assets/img/user1-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;

          &lt;div class=&quot;contacts-list-info&quot;&gt;
                &lt;span class=&quot;contacts-list-name&quot;&gt;
                  Count Dracula
                  &lt;small class=&quot;contacts-list-date pull-right&quot;&gt;2/28/2015&lt;/small&gt;
                &lt;/span&gt;
            &lt;span class=&quot;contacts-list-msg&quot;&gt;How have you been? I was...&lt;/span&gt;
          &lt;/div&gt;
          &lt;!-- /.contacts-list-info --&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;!-- End Contact Item --&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;
          &lt;img class=&quot;contacts-list-img&quot; src=&quot;dist/assets/img/user7-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;

          &lt;div class=&quot;contacts-list-info&quot;&gt;
                &lt;span class=&quot;contacts-list-name&quot;&gt;
                  Sarah Doe
                  &lt;small class=&quot;contacts-list-date pull-right&quot;&gt;2/23/2015&lt;/small&gt;
                &lt;/span&gt;
            &lt;span class=&quot;contacts-list-msg&quot;&gt;I will be waiting for...&lt;/span&gt;
          &lt;/div&gt;
          &lt;!-- /.contacts-list-info --&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;!-- End Contact Item --&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;
          &lt;img class=&quot;contacts-list-img&quot; src=&quot;dist/assets/img/user3-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;

          &lt;div class=&quot;contacts-list-info&quot;&gt;
                &lt;span class=&quot;contacts-list-name&quot;&gt;
                  Nadia Jolie
                  &lt;small class=&quot;contacts-list-date pull-right&quot;&gt;2/20/2015&lt;/small&gt;
                &lt;/span&gt;
            &lt;span class=&quot;contacts-list-msg&quot;&gt;I&#x27;ll call you back at...&lt;/span&gt;
          &lt;/div&gt;
          &lt;!-- /.contacts-list-info --&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;!-- End Contact Item --&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;
          &lt;img class=&quot;contacts-list-img&quot; src=&quot;dist/assets/img/user5-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;

          &lt;div class=&quot;contacts-list-info&quot;&gt;
                &lt;span class=&quot;contacts-list-name&quot;&gt;
                  Nora S. Vans
                  &lt;small class=&quot;contacts-list-date pull-right&quot;&gt;2/10/2015&lt;/small&gt;
                &lt;/span&gt;
            &lt;span class=&quot;contacts-list-msg&quot;&gt;Where is your new...&lt;/span&gt;
          &lt;/div&gt;
          &lt;!-- /.contacts-list-info --&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;!-- End Contact Item --&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;
          &lt;img class=&quot;contacts-list-img&quot; src=&quot;dist/assets/img/user6-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;

          &lt;div class=&quot;contacts-list-info&quot;&gt;
                &lt;span class=&quot;contacts-list-name&quot;&gt;
                  John K.
                  &lt;small class=&quot;contacts-list-date pull-right&quot;&gt;1/27/2015&lt;/small&gt;
                &lt;/span&gt;
            &lt;span class=&quot;contacts-list-msg&quot;&gt;Can I take a look at...&lt;/span&gt;
          &lt;/div&gt;
          &lt;!-- /.contacts-list-info --&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;!-- End Contact Item --&gt;
      &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt;
          &lt;img class=&quot;contacts-list-img&quot; src=&quot;dist/assets/img/user8-128x128.jpg&quot; alt=&quot;User Image&quot;&gt;

          &lt;div class=&quot;contacts-list-info&quot;&gt;
                &lt;span class=&quot;contacts-list-name&quot;&gt;
                  Kenneth M.
                  &lt;small class=&quot;contacts-list-date pull-right&quot;&gt;1/4/2015&lt;/small&gt;
                &lt;/span&gt;
            &lt;span class=&quot;contacts-list-msg&quot;&gt;Never mind I found...&lt;/span&gt;
          &lt;/div&gt;
          &lt;!-- /.contacts-list-info --&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;!-- End Contact Item --&gt;
    &lt;/ul&gt;
    &lt;!-- /.contatcts-list --&gt;
  &lt;/div&gt;
  &lt;!-- /.direct-chat-pane --&gt;
&lt;/div&gt;
&lt;!-- /.box-body --&gt;
&lt;div class=&quot;box-footer&quot;&gt;
  &lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
    &lt;div class=&quot;input-group&quot;&gt;
      &lt;input type=&quot;text&quot; name=&quot;message&quot; placeholder=&quot;Type Message ...&quot; class=&quot;form-control&quot;&gt;
      &lt;span class=&quot;input-group-btn&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-warning btn-flat&quot;&gt;Send&lt;/button&gt;
          &lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>

    </div>
</article>